<template>
    <div class="app-container">
        <el-form inline>
            <el-form-item label="平台账户" style="width: 300px;">
                <el-select v-model="filterParams.memberId">
                    <el-option v-for="item in accountList" :key="item.memberId" :label="item.memberName"
                        :value="item.memberId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务单据">
                <el-input v-model="filterParams.orderCode" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="支付日期">
                <el-date-picker v-model="filterParams.date" value-format="YYYY-MM-DD" type="daterange"
                    range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getDetailsListData">查询</el-button>
                <el-button pinia @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table :data="detailsList" :row-class-name="tableRowClassName">
                <el-table-column label="编码" prop="recordCode"></el-table-column>
                <el-table-column label="关联单据类型" prop="slipTypeName">
                </el-table-column>
                <el-table-column label="关联财务单据" prop="slipCode"></el-table-column>
                <el-table-column label="关联业务单据" prop="orderCode"></el-table-column>
                <el-table-column label="支付金额" prop="inMoney">
                    <template #default="scope">
                        {{ (scope.row.type == 1 && scope.row.adjustType == 1) || (scope.row.type == 2 &&
                            scope.row.adjustType == 2) ?
                            '-' : '' }}￥{{ scope.row.inMoney }}
                    </template>
                </el-table-column>
                <el-table-column label="收款方" prop="receiptAccount"></el-table-column>
                <el-table-column label="付款方" prop="payAccount"></el-table-column>
                <el-table-column label="描述" prop="remark"></el-table-column>
                <el-table-column label="发起时间" prop="receiptDate"></el-table-column>
                <template #empty>
                    <el-empty></el-empty>
                </template>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="pageParams.current" v-model:page-size="pageParams.size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="getDetailsListData" @current-change="getDetailsListData" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getDetailsList } from "@/api/finance/budgetDetails";
import { getAccountList } from "@/api/finance/platformAccounts";
import { useRoute } from "vue-router";

const router = useRoute();
const detailsList = ref([]);
const pageParams = ref({
    current: 1,
    size: 10,
})
const filterParams = ref({
    memberId:router.query.memberId,
})
const recordType = {
    1: { name: '正常单据', class: 'blue' },
    2: { name: '调整单据', class: 'red' }
}
const tableRowClassName = ({ row }) => {
    if (row.recordType == 2 && row.adjustType == 1) {
        return recordType[2].class;
    } else {
        return recordType[1].class;
    }
}
const slipType = {
    1: '订单付款单', 2: '采购付款单', 3: '预收款单'
}
const reset = () => {
    filterParams.value = {};
    getDetailsListData()
}
const total = ref(0)
const getDetailsListData = async () => {
    try {
        const params = { ...filterParams.value }
        if (filterParams.value.date) {
            params.payStartDate = filterParams.value.date[0] + ' 00:00:00';
            params.payEndDate = filterParams.value.date[1] + ' 23:59:59';
        }
        const res = await getDetailsList(pageParams.value, params);
        console.log(res.data.list)
        detailsList.value = res.data.list;
        total.value = res.data.total;
    } catch (error) {

    }
}
const accountList=ref([])
const getAccountListData = async () => {
    try {
        const res = await getAccountList({size:100});
        accountList.value = res.data.list;
        total.value = res.data.total;
    } catch (error) {

    }
}
onMounted(() => {
    getDetailsListData();
    getAccountListData();
})
</script>

<style lang="scss" scoped>
.pagination {
    display: flex;
    justify-content: end;
    margin-top: 20px;
}

.table {
    border: 1px solid #DCDFE6;

    ::v-deep(.blue) {
        background: #BFDEFF;
    }

    ::v-deep(.red) {
        background: rgba(255, 0, 0, 0.23);
    }
}
</style>